<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleReturn"> 返回</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '详细信息',
                icon: 'clarity:info-standard-line',
                onClick: handleDesc.bind(null, record),
              },
              {
                label: '申请加入',
                icon: 'carbon:add-alt',
                onClick: handleJoin.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <GroupDescModal @register="registerDescModal" />
  </div>
</template>
<script lang="ts" setup>
  import { useMessage } from "/@/hooks/web/useMessage";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import { useModal } from "/@/components/Modal";
  import GroupDescModal from "/@/views/teacher/group/list/Desc.vue";
  import { useRoute, useRouter } from "vue-router";
  import { useTabs } from "/@/hooks/web/useTabs";
  import { applyGroupApi, getGroupPageByUserIdApi } from "/@/api/core/group";
  import { groupBasicColumns } from "/@/views/default/data";

  const router = useRouter();
  const route = useRoute();
  const { userId } = route.query;
  const [registerTable] = useTable({
    title: "教师小组详情",
    rowKey: "groupId",
    columns: groupBasicColumns,
    api: getGroupPageByUserIdApi,
    actionColumn: {
      width: 240,
      ...defaultActionColumn,
    },
    ...defaultTableSettings,
    beforeFetch(params) {
      return { ...params, userId };
    },
  });

  const [registerDescModal, { openModal: openDescModal }] = useModal();

  function handleDesc(data) {
    openDescModal(true, data);
  }

  const { createMessage } = useMessage();
  async function handleJoin(record) {
    await applyGroupApi(record.groupId);
    createMessage.success("成功发送申请，请耐心等待老师审核通过");
  }

  const { closeCurrent } = useTabs();
  function handleReturn() {
    closeCurrent();
    router.back();
  }
</script>
